<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="800px"
    @close="$emit('closeDialog', '')"
  >
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="form.taskName" placeholder="请输入" :disabled="title == '任务详情'"></el-input>
      </el-form-item>
      <el-form-item label="执行时间" prop="timeArr">
        <el-date-picker
          v-model="form.timeArr"
          :disabled="title == '任务详情'"
          style="width: 100%"
          type="daterange"
          value-format="yyyy-MM-dd 00:00:00"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="责任部门" prop="deptId">
            <el-cascader
              v-model="form.deptId"
              :disabled="title == '任务详情'"
              filterable
              placeholder="请选择"
              style="width: 100%"
              :options="deptData"
              :props="{ label: 'name', value: 'id', emitPath: false }"
              clearable
              @change="changeDept"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人" prop="directorId">
            <el-select
              v-model="form.directorId"
              :disabled="title == '任务详情'"
              placeholder="请选择责任人"
              style="width: 100%"
            >
              <el-option v-for="item in userData" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="通知设置" prop="noticeSetting">
        <el-checkbox-group v-model="noticeSetting" :disabled="title == '任务详情'">
          <el-checkbox label="station" name="noticeSetting">站内</el-checkbox>
          <el-checkbox label="email" name="noticeSetting">邮件</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="任务描述" prop="description">
        <el-input v-model="form.description" :disabled="title == '任务详情'" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="title !== '任务详情'" size="small" @click="$emit('closeDialog', '')">取 消</el-button>
      <el-button size="small" type="primary" @click="submitForm('form')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { requestRolePage } from '@/api/system/role'
import { requestDepartmentTreeList } from '@/api/system/dept'
import ListMixin from '@/utils/mixins/list-mixin'
import { groupTree } from '@/api/panel/panel'
import { requestUserPage } from '@/api/system/user'
import { requestTaskCreate, requestTaskUpdate } from '@/api/warning-task/task'

export default {
  name: 'AddDialog',
  components: {},
  mixins: [ListMixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    taskData: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: '新增任务',
    },
  },
  data() {
    return {
      form: {
        timeArr: [],
        noticeSetting: [],
      },
      noticeSetting: [],
      rules: {
        timeArr: [[{ type: 'array', required: true, message: '请选择', trigger: 'change' }]],
        deptId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
        directorId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
      },
      deptData: [],
      userData: [],
    }
  },
  created() {
    this.getDept()
    if (this.taskData) {
      this.form = {
        timeArr: this.taskData.startTime ? [this.taskData.startTime, this.taskData.endTime] : [],
        ...this.taskData,
      }
      this.noticeSetting = this.taskData.noticeSetting.split(',')
      this.changeDept(this.taskData.deptId)
    }
  },
  methods: {
    transformData(treeData) {
      let children = []
      treeData.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          this.transformData(item.children)
        } else {
          item.children = null
        }
      })
      return children
    },
    getDept() {
      requestDepartmentTreeList({}).then((res) => {
        if (res.success) {
          this.transformData(res.data.listObject)
          this.deptData = res.data.listObject
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    // 根据部门查询责任人
    changeDept(val) {
      const params = {
        deptId: val,
        pageSize: 999,
        pageNo: 1,
      }
      requestUserPage(params).then((res) => {
        if (res.success) {
          this.userData = res.data.listObject
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    submitForm(formName) {
      if (this.title === '任务详情') {
        this.$emit('closeDialog', '')
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const api = {
            add: requestTaskCreate,
            edit: requestTaskUpdate,
          }
          this.form.noticeSetting = this.noticeSetting.join(',')
          this.form.startTime = this.form.timeArr[0]
          this.form.endTime = this.form.timeArr[1]
          delete this.form.date
          api[this.title === '编辑任务' ? 'edit' : 'add'](this.form).then((res) => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.$emit('closeDialog', '')
            } else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
